<template>
  <div id="user-information-verify" class="animate__animated animate__slideInRight">
    <el-row>
      <el-descriptions
        title="为您生成的身份卡片"
        direction="vertical"
        border
        style="margin: 20px auto; width: 100%"
      >
        <el-descriptions-item :rowspan="4" :width="200" label="头像" align="center">
          <el-image
            style="width: 150px; height: 150px"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
        </el-descriptions-item>
        <el-descriptions-item label="用户名">{{ userInformation.username }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ userInformation.sex }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ userInformation.phone }}</el-descriptions-item>
        <el-descriptions-item label="密码">{{ userInformation.password }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ userInformation.email }}</el-descriptions-item>
        <el-descriptions-item label="姓名">{{ userInformation.name }}</el-descriptions-item>
        <el-descriptions-item label="生日">{{ userInformation.birthday }}</el-descriptions-item>
      </el-descriptions>
    </el-row>
    <el-row style="margin: 20px auto">
      <div class="buttons" style="margin: 0 auto">
        <el-button @click="returnModify">修改</el-button>
        <el-button style="margin-left: 100px" @click="submitRegister">注册</el-button>
      </div>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { type User } from '@/utils/dataType/UserModel.ts'
import { userRegister } from '@/services/api/user'
import { ElMessage } from 'element-plus'
import router from '@/router'
//todo获取到上一页返回来的个人信息数据
import { userRegisterMessageStore } from '@/stores/userRegisterMessageStore'
import { useCurrentUserStore } from '@/stores/useCurrentUserStore.ts'

const userStore = userRegisterMessageStore()
const userInformation = userStore.userInformation

const currentUserStore = useCurrentUserStore()

function returnModify() {
  router.push({
    path: '/user-register/register2',
    replace: true,
  })
}

async function submitRegister() {
  await register(userInformation)
}

async function register(user: user) {
  try {
    const res = await userRegister(user)
    ElMessage.success('注册成功')
    currentUserStore.loginUser.status = 1
    currentUserStore.loginUser.infor = res.data
    localStorage.setItem('token', res.data.token)
    localStorage.setItem('user', JSON.stringify(res.data))
    router.push('/')
  } catch (error) {
    console.error('注册失败:', error)
  } finally {
    userStore.clearData()
  }
  // try {
  //   const res = await userRegister(user)
  //   if (res.status == 200) {
  //     if (res.data.code == 1) {
  //       //判断code返回码
  //       ElMessage.success('注册成功')
  //       currentUserStore.loginUser.status = 1
  //       currentUserStore.loginUser.infor = res.data.data
  //       localStorage.setItem('token', res.data.data.token)
  //       router.push({
  //         path: '/',
  //         replace: true,
  //       })
  //     } else {
  //       ElMessage.error('注册失败' + res.data.msg)
  //     }
  //   }
  // } catch (error) {
  //   ElMessage.error('出错了:' + error)
  // }finally {
  //   userStore.clearData() //清空数据
  // }
}
</script>

<style scoped>
#user-information-verify {
  width: 85%;
  margin: auto 0;
}
</style>
